<template>
  <view class="">
    <view class="about">
      <view class="cell">
        <button
          style="background-color: #fff; padding: 0"
          type="balanced"
          open-type="chooseAvatar"
          @chooseavatar="onChooseavatar"
        >
          <view class="cell-item" hover-class="active">
            <view class="left">头像</view>
            <view class="right">
              <u-image
                :showLoading="true"
                :src="
                  avatar
                    ? avatar
                    : '/static/user/avatar.png'
                "
                shape="circle"
                width="96rpx"
                height="96rpx"
              ></u-image>
              <u-icon
                name="arrow-right"
                class="iconRight"
                color="#B3B3B3"
                size="26rpx"
              ></u-icon>
            </view>
          </view>
        </button>
        <u-line color="#E6E6E6"></u-line>
        <view
          class="cell-item"
          hover-class="active"
          @click="toPage('set/setNickName')"
        >
          <view class="left">昵称</view>
          <view class="right">
            <text>{{ name ? name : '' }}</text>
            <u-icon
              name="arrow-right"
              class="iconRight"
              color="#B3B3B3"
              size="26rpx"
            ></u-icon>
          </view>
        </view>
        <!-- <u-line color="#E6E6E6"></u-line>
        <view class="cell-item" hover-class="active" @click="showSex = true">
          <view class="left">性别</view>
          <view class="right">
            <text>{{
              UserInfo.gender == 1 ? '男' : UserInfo.gender == 2 ? '女' : ''
            }}</text>
            <u-icon
              name="arrow-right"
              class="iconRight"
              color="#B3B3B3"
              size="26rpx"
            ></u-icon>
          </view>
        </view> -->

        <!-- <u-line color="#E6E6E6"></u-line>
        <view class="cell-item" hover-class="active" @click="showB = true">
          <view class="left">生日</view>
          <view class="right">
            <text>{{ UserInfo.birthDate ? UserInfo.birthDate : '' }}</text>
            <u-icon
              name="arrow-right"
              class="iconRight"
              color="#B3B3B3"
              size="26rpx"
            ></u-icon>
          </view>
        </view> -->
      </view>
    </view>

    <!--  -->
    <u-picker
      :closeOnClickOverlay="true"
      :show="showSex"
      :columns="columns"
      @confirm="confirm"
      @close="showSex = false"
      confirmColor="#FF5900"
      @cancel="showSex = false"
    ></u-picker>

    <!-- 生日 -->
    <u-datetime-picker
      confirmColor="#FF5900"
      :show="showB"
      v-model="value1"
      mode="date"
      :minDate="0"
      :maxDate="new Date().getTime()"
      :formatter="formatter"
      :closeOnClickOverlay="true"
      @close="showB = false"
      @cancel="showB = false"
      @confirm="confirmB"
    >
    </u-datetime-picker>
  </view>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import pageMixin from '@/mixins/pageMixin'
import dayjs from 'dayjs'
import AliOss from '@/common/oss.js'
import { getUploadAccount } from '@/api/upload/upload.js'
export default {
  mixins: [pageMixin],
  data() {
    return {
      ossData: {}, // 上传
      showSex: false,
      showB: false,
      value1: Number(new Date()),
      columns: [['男', '女']],
      info: {},
    }
  },
  computed: {
    ...mapState('user', ['name', 'token', 'avatar', 'UserInfo']),
  },
  methods: {
    ...mapActions('user', ['updateInfo', 'GetUserInfo']),
    onChooseavatar(e) {
      let { avatarUrl } = e.detail
      console.log("avatarUrl="+avatarUrl)
      //let time = dayjs().format('YYYYMMDD')
      //user/avatar/${time}
      // oss 配置信息
      let option = {
        savePath: `ma/img`,
        AccessKeySecret: this.ossData.accessKeySecret,
        SecurityToken: this.ossData.securityToken,
        AccessKeyId: this.ossData.accessKeyId,
        bucket: this.ossData.buket,
        area: 'oss-cn-hangzhou',
      }
      // 图片单文件上传
      console.log(option)
      AliOss.upload(avatarUrl, option, async res => {
        if (res) {
          console.log(res, 'sfd')
          let path = 'https://jzyhmall.oss-cn-hangzhou.aliyuncs.com/'+res
          // 修改信息
          const resData = await this.updateInfo({ avatar: path }) //修改头像信息
          console.log("33333")
          console.log(resData)
          if (resData.status == 200 && resData.data) {
            await this.GetUserInfo()
            uni.$u.toast('修改头像成功!')
            // uni.navigateBack()
          }
          uni.hideLoading()
        } else {
          uni.$u.toast('上传失败，请稍后重试')
        }
      })
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    async confirm(item) {
      console.log(item)
      // 修改信息
      const resData = await this.updateInfo({ gender: item.indexs[0] + 1 }) //修改头像信息
      console.log(resData)
      if (resData === true) {
        await this.GetUserInfo()
        // uni.$u.toast('修改性别成功!');
        this.showSex = false
      } else {
        uni.$u.toast('修改失败，请重试')
      }
    },
    async confirmB(e) {
      //birthDate
      this.info.date = dayjs(e.value).format('YYYY-MM-DD')
      console.log(this.info.date)
      const resData = await this.updateInfo({ birthDate: this.info.date }) //修改头像信息
      console.log(resData)
      if (resData === true) {
        await this.GetUserInfo()
        // uni.$u.toast('修改生日成功!');
        this.showB = false
      } else {
        uni.$u.toast('修改失败，请重试')
      }
    },
  },
  onLoad() {
    // 上传参数
    getUploadAccount().then(res => {
      console.log(33333)
      console.log(res)
      res.data && res.status ? this.ossData = res.data : ''
    })
  },
}
</script>

<style lang="scss" scoped>
.about {
  background-color: #ffffff;
  .cell {
    margin-top: 20rpx;
    background-color: #ffffff;
    &-item {
      position: relative;
      align-items: center;
      justify-content: space-between;
      width: 100vw;
      padding: 0 32rpx;
      height: 112rpx;
      display: flex;
      height: 144rpx;
      &.active {
        background-color: #f8f8f8;
      }
      .left {
        font-size: 32rpx;
        font-weight: 400;
        color: #121212;
      }
      .right {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        .update {
          margin: 0 16rpx;
          color: #FF5900;
        }
        .phone,
        .avatar {
          margin-right: 20rpx;
        }
      }
    }
  }
}
.iconRight {
  margin-left: 5rpx;
}
</style>
